<template>
  <div>
    <input type="text" v-model="msg" />
    <p>{{ msg }}</p>
    <input type="text" v-model="obj.a" />
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      msg: "hello",
      obj: {
        a: "world",
      },
    };
  },
  computed: {},
  watch: {
    // 基本数据类型
    msg(newValue, old) {
      console.log(newValue, old);
    },
    // 引用数据类型，固定写法才能在对象不改变的情况下监听，就是深度监听
    obj: {
      handler(newValue, old) {
        console.log(newValue, old);
      },
      deep: true, //开启深度监听
      immediate: true, //第一次进入就直接监听，不用发生改动
    },
  },
  created() {},
  methods: {},
};
</script>

<style scoped></style>
